<template>
  <a-spin :spinning="confirmLoading">
    <a-row style="margin-top: 12px;" v-for="(model, index) of modelList" :key="index">
      <a-divider v-if="index !== 0" />
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col v-has="'score:owner'" :span="24">
              <a-form-model-item label="积分所属人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerId">
                <j-select-user-by-dep v-model="model.ownerId" :multi="false" :disabled="formDisabled"/>
              </a-form-model-item>
            </a-col>
            <!--                      <a-col :span="24">-->
            <!--                        <a-form-model-item label="所属人部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerDeptId">-->
            <!--                          <j-select-depart v-model="model.ownerDeptId" :multi="true"  />-->
            <!--                        </a-form-model-item>-->
            <!--                      </a-col>-->
            <!--          <a-col :span="24">-->
            <!--            <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createdId">-->
            <!--              <j-select-user-by-dep v-model="model.createdId" :multi="true" />-->
            <!--            </a-form-model-item>-->
            <!--          </a-col>-->
            <a-col :span="24">
              <a-form-model-item label="积分类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="scoreType">
                <j-search-select-tag v-model="model.scoreType" dict="score_type" :disabled="formDisabled" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="拟申请积分分数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="scoreValue">
                <a-input v-model="model.scoreValue" placeholder="请输入拟申请积分分数" :disabled="authDisableFlag"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="归属年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
                <j-date :disabled="authDisableFlag" placeholder="请选择归属年份" date-format="YYYY" v-model="model.year" mode="year" style="width: 100%" @yearChange="handleYearChange($event, index)"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="是否已兑付奖励" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isUsed">
                <j-dict-select-tag :disabled="authDisableFlag" type="radio" v-model="model.isUsed" dictCode="yn" placeholder="请选择是否已兑付奖励" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="积分描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="scoreDesc">
                <a-textarea :disabled="formDisabled" v-model="model.scoreDesc" placeholder="请输入积分描述"></a-textarea>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="证明材料" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evidenceUrl">
                <j-upload :disabled="['check', 'auth'].includes(openFlag) && formDisabled" v-model="model.evidenceUrl"></j-upload>
              </a-form-model-item>
            </a-col>
            <a-col v-if="authDescFlag" v-has="'score:authdesc'" :span="24">
              <a-form-model-item label="审核说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="authDesc">
                <a-textarea v-model="model.authDesc" placeholder="请输入审核说明" :disabled="openFlag !== 'auth'"></a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <a-row v-if="openFlag === 'add'" :span="24" style="margin-top: 12px;">
        <a-button v-if="modelList.length > 1" style="position: relative; left: 650px" shape="circle" icon="minus"
                  @click="delBatch(index)" />
        <a-button v-if="adminFlag && index === modelList.length - 1" style="position: relative; left: 670px"
                  shape="circle" icon="plus" @click="addBatch" />
      </a-row>
    </a-row>
  </a-spin>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  name: 'ScoreInfForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      // model:{
      //     isUsed:"0",
      //  },
      modelList: [
        {
          isUsed: '0',
          authStatus: this.adminFlag ? '2' : '0',
          year: moment().format('YYYY')
        }
      ],
      authStatus: '0',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/score/scoreInf/add',
        edit: '/score/scoreInf/edit',
        queryById: '/score/scoreInf/queryById'
      },
      // 新增弹框标识
      openFlag: '',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    ...mapState({
      device: state => state.app.device,
      user: state => state.user,
      authList: state => state.user.authList
    }),
    adminFlag() {
      const adminFlag = this.authList.findIndex((item) => item.action === 'score:admin')
      return adminFlag > -1
    },
    authDisableFlag() {
      const admin = this.adminFlag && ['add', 'auth'].includes(this.openFlag)
      const other = !this.adminFlag && ['add', 'edit'].includes(this.openFlag)
      return !(admin || other)
    },
    authDescFlag() {
      return this.openFlag === 'auth' || (this.adminFlag && this.openFlag === 'check')
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.modelList))
  },
  methods: {
    moment,
    handleYearChange(val,index) {
      this.$set(this.modelList[index], 'year', val.format('YYYY'))
    },
    add() {
      this.edit(this.modelDefault, 'add')
    },
    addBatch() {
      this.modelList.push({
        isUsed: '0',
        authStatus: this.adminFlag ? '2' : '0',
        year: moment().format('YYYY')
      })
    },
    delBatch(index) {
      this.modelList.splice(index, 1)
    },
    edit(record, flag) {
      this.model = Object.assign({}, record)
      this.openFlag = flag
      if (['edit', 'auth', 'check'].includes(flag)) {
        this.modelList.push(record)
        this.modelList.splice(0, 1)
      }
      this.visible = true
    },
    submitForm(authStatus) {
      const that = this
      // 触发表单验证
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      that.confirmLoading = true
      // if (!this.adminFlag && this.modelList.length === 1) {
      // this.modelList[0].ownerId = this.user.info.username
      // this.modelList[0].ownerName = this.user.info.realname
      // this.modelList[0].ownerDeptId = this.user.info.departIds
      // }
      let httpurl = ''
      let method = ''
      if (!this.modelList[0].id) {
        httpurl += this.url.add
        this.modelList = this.modelList.map(item => {
          return Object.assign({}, item, {authStatus: authStatus})
        })
        method = 'post'
      } else {
        httpurl += this.url.edit
        this.modelList[0].authStatus = authStatus
        method = 'put'
      }
      const requestMap = Object.assign({}, { scoreInfList: this.modelList })
      httpAction(httpurl, requestMap, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
      //   }
      //
      // })
    }
  }
}
</script>